<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="/css/el.css">
    <script src="/js/v2.6.10/vue.js" type="text/javascript" charset="utf-8"></script>
    <script src="/js/el.js"></script>
    <script src="/js/axios.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #app {
            padding: 50px;
            text-align: center;
        }

        .declare {
            width: 100%;
            height: 600px;
            display: inline-block;
            text-align: left;
        }

        .tabel .cell{
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>

<div id="app">
    <div class="declare">
        <div>
            <el-input v-model="pId" placeholder="请输入项目编号" style="width: 15%;"></el-input>
            <el-select v-model="declare.year" filterable placeholder="请选择年度区间">
                <el-option v-for="item in years" :key="item.yearId" :label="item.yearName"
                           :value="item.yearId">
                </el-option>
            </el-select>
            <el-select v-model="declare.month" filterable placeholder="请选择月度区间">
                <el-option v-for="item in months" :key="item.intervalId" :label="item.intervalName"
                           :value="item.intervalId">
                </el-option>
            </el-select>
            <el-button type="primary" icon="el-icon-search" @click="queryProject">查询</el-button>
        </div>
        <div style="margin-top: 20px;">
            <el-tabs @tab-click="stateSwitch">
                <el-tab-pane label="填报处理中"></el-tab-pane>
                <el-tab-pane label="送审中"></el-tab-pane>
                <el-tab-pane label="驳回"></el-tab-pane>
                <el-tab-pane label="通过"></el-tab-pane>
            </el-tabs>
        </div>
        <div style="margin-top: 5px;height: 600px;" class="tabel">
            <el-table :data="DeclareInformation" border style="width: 100%">
                <el-table-column prop="declareId" label="申报编号">
                </el-table-column>
                <el-table-column prop="declareName" label="申报事项">
                </el-table-column>
                <el-table-column prop="pname" label="申报项目">
                </el-table-column>
                <el-table-column prop="money" label="报销金额">
                </el-table-column>
                <el-table-column prop="yearName" label="会计年度">
                </el-table-column>
                <el-table-column prop="intervalName" label="会计区间">
                </el-table-column>
                <el-table-column prop="state" label="状态">
                    <template slot-scope="scope">
                        <div>
                            <div v-if="scope.row.state === 1">填报处理中</div>
                            <div v-if="scope.row.state === 2">送审中</div>
                            <div v-if="scope.row.state === 3">驳回</div>
                            <div v-if="scope.row.state === 4">通过</div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="reviewer" label="审核人">
                </el-table-column>
                <el-table-column prop="phone" label="填报人手机号">
                </el-table-column>
                <el-table-column prop="creationTime" label="填报时间">
                </el-table-column>
                <el-table-column label="操作" width="250px">
                    <template slot-scope="scope">
                        <el-button size="mini" v-if="scope.row.state === 1 || scope.row.state === 3" @click="updateDeclare(scope.row)">编辑</el-button>
                        <el-button type="primary" v-if="scope.row.state === 1 || scope.row.state === 3" size="mini" @click="declareSubmit(scope.row)">送审</el-button>
                        <el-button type="danger" size="mini" v-if="scope.row.state === 1 || scope.row.state === 3" @click="deleteDeclare(scope.row,-1)">删除</el-button>
                        <el-button type="warning" size="mini" v-if="scope.row.state === 2" @click="revokeSubmit(scope.row)">撤销送审</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div style="text-align: center;">
            <el-pagination @current-change="currentChange" @next-click="nextClick()" @prev-click="prevClick()" background layout="prev, pager, next" :total="total">
            </el-pagination>
        </div>
    </div>
</div>
<script>
    new Vue({
        el: "#app",
        created(){
            this.getYearAndMonth();
        },
        mounted() {
            window.addEventListener('message', this.handleMessage);
        },
        data() {
            return {
                pId: "",
                years: [],
                months:[],
                lock:false,
                declare:{
                    year:'',
                    month:'',
                    state:1
                },
                total:0,
                currentPage:1,
                DeclareInformation:[]
            }
        },
        methods:{
            getDeclareInformation(){
                if(!this.lock){
                    this.lock = true;

                    const formData = new FormData();
                    formData.append("pId", this.pId);
                    formData.append("yearId", this.declare.year);
                    formData.append("intervalId", this.declare.month);
                    formData.append("state", this.declare.state);
                    formData.append("current", this.currentPage);
                    axios.post("/declare/getDeclareInformation",formData)
                        .then((response)=>{
                            response = response.data;
                            if(response.code === 403){
                                location.href = "/page/logonPage"
                            }else if(response.code !== 200){
                                this.$message.error(response.message);
                            }else{
                                this.DeclareInformation = response.data.records;
                                this.total = response.data.total;
                            }
                        }).finally(() =>{
                        this.lock = false;
                    })
                }
            },
            updateDeclare(row){
                window.parent.postMessage({page:'declare',index:2,row:row}, '*');
            },
            deleteDeclare(row,index){
                if(index!==1){
                    window.parent.postMessage({page:'declare',index:1,row:row}, '*');
                    return;
                }

                if(!this.lock){
                    this.lock = true;
                    const formData = new FormData();
                    formData.append("declareId", row.declareId);
                    axios.post("/declare/deleteDeclare",formData)
                        .then((response)=>{
                            response = response.data;
                            if(response.code === 403){
                                location.href = "/page/logonPage"
                            }else if(response.code !== 200){
                                this.$message.error(response.message);
                            }else{
                                this.$message({
                                    message: '删除申报成功',
                                    type: 'success'
                                });
                            }
                        }).finally(() =>{
                        this.lock = false;
                        this.getDeclareInformation();
                    })
                }
            },
            revokeSubmit(row){
                if(!this.lock){
                    this.lock = true;
                    const formData = new FormData();
                    formData.append("declareId", row.declareId);
                    axios.post("/declare/revokeSubmit",formData)
                        .then((response)=>{
                            response = response.data;
                            if(response.code === 403){
                                location.href = "/page/logonPage"
                            }else if(response.code !== 200){
                                this.$message.error(response.message);
                            }else{
                                this.$message({
                                    message: '撤销送审成功',
                                    type: 'success'
                                });
                            }
                        }).finally(() =>{
                        this.lock = false;
                        this.getDeclareInformation();
                    })
                }
            },
            declareSubmit(row){
                if(!this.lock){
                    this.lock = true;
                    const formData = new FormData();
                    formData.append("declareId", row.declareId);
                    axios.post("/declare/declareSubmit",formData)
                        .then((response)=>{
                            response = response.data;
                            if(response.code === 403){
                                location.href = "/page/logonPage"
                            }else if(response.code !== 200){
                                this.$message.error(response.message);
                            }else{
                                this.$message({
                                    message: '送审成功',
                                    type: 'success'
                                });
                            }
                        }).finally(() =>{
                        this.lock = false;
                        this.getDeclareInformation();
                    })
                }
            },
            stateSwitch(tab, event){
                console.log(tab, event);
                this.currentPage = 1;
                this.declare.state = Number(tab.index) +1;
                this.getDeclareInformation();
            },
            getYearAndMonth() {
                if(!this.lock){
                    this.lock = true;
                    axios.post("/financialYear/getYearAndMonth")
                        .then((response)=>{
                            response = response.data;
                            if(response.code === 403){
                                location.href = "/page/logonPage"
                            }else if(response.code !== 200){
                                this.$message.error(response.message);
                            }else{
                                this.years = response.data.year;
                                this.months = response.data.month;
                            }
                        }).finally(() =>{
                        this.lock = false;
                        this.getDeclareInformation();
                    })
                }
            },
            queryProject(){
                this.currentPage = 1;
                this.getDeclareInformation();
            },
            currentChange(e){
                this.currentPage = e;
                this.getDeclareInformation();
            },
            prevClick(){
                if(this.currentPage-1 === 0){
                    return;
                }
                this.currentPage -= 1;
                this.getDeclareInformation();
            },
            nextClick(){
                this.currentPage += 1;
                this.getDeclareInformation();
            },handleMessage(message){
                if(message.data.page === "deleteDeclare"){
                    this.deleteDeclare(message.data.row,1);
                }else if(message.data.page === "updateDeclareSuccess"){
                    this.getDeclareInformation();
                }
            }
        }
    })
</script>
</body>
</html>